<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .tab-box{
            width:180px;
            position: fixed;
            left: 0;
            top: 0;
            background-color: aliceblue;
            height: 100vh;
        }
        .tab-item{
            width: 100%;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .active{
            background-color: red;
        }
        .right-box{
            margin-left: 180px;
        }
    </style>

</head>
<body>
<div id="app">
    <div class="tab-box">
        <div
                class="tab-item"
                :class="{ active: index == tabIndex }"
                v-for="(item,index) in tabList"
                @click="selectTab(index)"
        > {{item.name}}</div>
    </div>
    <div class="right-box">
        <h1 v-if="tabIndex == 0">000!</h1>
        <h1 v-if="tabIndex == 1">001!</h1>
        <h1 v-if="tabIndex == 2">002!</h1>
        <h1 v-if="tabIndex == 3">003!</h1>
        <h1 v-if="tabIndex == 4">004!</h1>
    </div>
</div>
<script>
    const { createApp, ref } = Vue

    createApp({
        setup() {
            const isActive = ref(true)
            const message = ref('Hello vue!')
            const tabIndex = ref(0)
            const tabList = ref([
                {
                    name: 'tab1',
                    title: 'Tab 1'
                },
                {
                    name: 'tab2',
                    title: 'Tab 2'
                },
                {
                    name: 'tab3',
                    title: 'Tab 3'
                },
                {
                    name: 'tab3',
                    title: 'Tab 3'
                }
            ])
            function selectTab(index) {
                tabIndex.value = index
            }
            return {
                message,
                tabList,isActive,tabIndex,selectTab
            }
        }
    }).mount('#app')
</script>
</body>
</html>